<template>
    <el-form ref="ruleFormRef" :model="ruleForm" >
    <el-descriptions size="small" border  id="print" class="print">
        <el-descriptions-item width="20px" label="" :span="3">
            <el-descriptions border :column="2" >
                <el-descriptions-item :span="3">
                    <template #label><div class="cell-item">合同名称　　　　</div></template>
                    <div><el-text>{{ ruleForm.title }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item >
                    <template #label><div class="cell-item">合同总金额　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.price }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item >
                    <template #label><div class="cell-item">税率　　　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.tax_rate 　}}%</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item >
                    <template #label><div class="cell-item">税金　　　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.tax_price }}</el-text></div>
                </el-descriptions-item>
            </el-descriptions>
        </el-descriptions-item>

        <el-descriptions-item width="20px" label="购买方信息" :span="3">
            <el-descriptions border :column="2" >
                <el-descriptions-item label="单位名称　　　　">
                    <template #label><div class="cell-item">单位名称　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.name }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="纳税人识别号　　">
                    <template #label><div class="cell-item">纳税人识别号　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.tax_id }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="地址　　　　　　">
                    <template #label><div class="cell-item">地址　　　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.address }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="电话　　　　　　">
                    <template #label><div class="cell-item">电话　　　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.mobile }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="开户银行　　　　">
                    <template #label><div class="cell-item">开户银行　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.bank }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="开户行号　　　　">
                    <template #label><div class="cell-item">开户行号　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.bank_number }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="开户行号　　　　">
                    <template #label><div class="cell-item">开户行号　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.bank_account }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="邮箱　　　　　　">
                    <template #label><div class="cell-item">邮箱　　　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.email }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="邮政编码　　　　">
                    <template #label><div class="cell-item">邮政编码　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.postal_code }}</el-text></div>
                </el-descriptions-item>
            </el-descriptions>
        </el-descriptions-item>

        <el-descriptions-item width="20px" label="销售方信息" :span="3">
            <el-descriptions border :column="2" >
                <el-descriptions-item label="单位名称　　　　">
                    <template #label><div class="cell-item">单位名称　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_name }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="纳税人识别号　　">
                    <template #label><div class="cell-item">纳税人识别号　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_tax_id }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="地址　　　　　　">
                    <template #label><div class="cell-item">地址　　　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_address }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="电话　　　　　　">
                    <template #label><div class="cell-item">电话　　　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_mobile }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="开户银行　　　　">
                    <template #label><div class="cell-item">开户银行　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_bank }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="开户行号　　　　">
                    <template #label><div class="cell-item">开户行号　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_bank_number }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="开户行号　　　　">
                    <template #label><div class="cell-item">开户行号　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_bank_account }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="邮箱　　　　　　">
                    <template #label><div class="cell-item">邮箱　　　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_email }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="邮政编码　　　　">
                    <template #label><div class="cell-item">邮政编码　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_postal_code }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="公司营业执照　　">
                    <template #label><div class="cell-item">公司营业执照　　</div></template>
                    <div class="w-f"><el-link type="primary" @click="onShowFile('b_business_file')">{{ruleForm.b_business_file ? '查看' : '未上传'}}</el-link></div>
                </el-descriptions-item>
                <el-descriptions-item label="法人身份证　　　">
                    <template #label><div class="cell-item">法人身份证　　　</div></template>
                    <div class="w-f"><el-link type="primary" @click="onShowFile('b_idcard_file')">{{ruleForm.b_idcard_file ? '查看' : '未上传'}}</el-link></div>
                </el-descriptions-item>
                <el-descriptions-item label="企业法人　　　　">
                    <template #label><div class="cell-item">企业法人　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_legal }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="企业法人联系电话">
                    <template #label><div class="cell-item">企业法人联系电话</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_legal_mobile }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="代理人　　　　　">
                    <template #label><div class="cell-item">代理人　　　　　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_agent }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="代理人联系电话　">
                    <template #label><div class="cell-item">代理人联系电话　</div></template>
                    <div class="w-f"><el-text>{{ ruleForm.b_agent_mobile }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label="委托代理授权书　">
                    <template #label><div class="cell-item">委托代理授权书　</div></template>
                    <div class="w-f"><el-link type="primary" @click="onShowFile('b_authorize_file')">{{ruleForm.b_authorize_file ? '查看' : '未上传'}}</el-link></div>
                </el-descriptions-item>
                <el-descriptions-item label="代理人身份证　　">
                    <template #label><div class="cell-item">代理人身份证　　</div></template>
                    <div class="w-f"><el-link type="primary" @click="onShowFile('b_agent_idcard_file')">{{ruleForm.b_agent_idcard_file ? '查看' : '未上传'}}</el-link></div>
                </el-descriptions-item>
            </el-descriptions>
        </el-descriptions-item>
        <el-descriptions-item :span=2>
            <template #label>
                <div class="cell-item" style="width: 20px;">　　　　　</div>
            </template>
            <el-table :data="tableData" style="width: 100%;font-size: 16px;height: auto !important;">
                <el-table-column type="index" :index="indexMethod" label="序号" width="60" align="center" />
                <el-table-column prop="name" label="项目名称" show-overflow-tooltip align="center" />
                <el-table-column prop="content" label="施工内容" show-overflow-tooltip align="center" />
                <el-table-column prop="unit" label="单位" show-overflow-tooltip align="center" />
                <el-table-column prop="unit_price" label="材料单价" show-overflow-tooltip align="center" />
                <el-table-column prop="work_quantity" label="工程量" show-overflow-tooltip align="center" />
                <el-table-column prop="price" label="合价" show-overflow-tooltip align="center" />
                <el-table-column prop="remarks" label="备注" show-overflow-tooltip align="center" />
            </el-table>
        </el-descriptions-item>
    </el-descriptions>
    </el-form>
    <div class="text-center"><el-button type="warning" @click="isTemplate = true" > 合同文本 </el-button></div>
    <el-dialog v-model="showFile" title="文件">
        <el-image style="width: 200px;" :src="files" />
    </el-dialog>

    <el-dialog v-model="isTemplate" title="合同模板" width="980px">
        <component v-if="ruleForm.type == 'Labor'" :is="laborTemplate" :id = ruleForm.id />
        <component v-else :is="materialTemplate" :id = ruleForm.id />
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { ref, watch } from 'vue';
import http from '../util/request';
import { FormInstance } from 'element-plus';
import materialTemplate from "@/components/materialTemplate.vue";
import laborTemplate from "@/components/laborTemplate.vue";

const indexMethod = (index: number) => {
  return index+= 1
}

const showFile = ref<boolean>(false)
const isTemplate = ref(false)
const files = ref<string>('')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<any>({})
const tableData = ref<any>([])

const getData = () => {
    if(ruleForm.value.id == 0){
        return;
    }
    http.get('/contract/'+ruleForm.value.id).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
            tableData.value = response.data.data.details
            ruleForm.value.price = parseInt(ruleForm.value.price)
        }
    })
}

const onShowFile = (file:string) => {
    files.value = file
    showFile.value = true
}

const props = defineProps<{
    data:any
    type:boolean
}>()

watch(props,()=>{
    ruleForm.value.id = props.data
    getData()
},{ immediate: true })

</script>
<style scoped>
.contract{height: calc(100vh - 25vh);overflow-y: scroll;}
.print{width: 210mm;size: A4;margin: 1cm;}
.cell-item{width: 100px;}
.w-f{width: 220px;}
</style>
